<template>
	<div class="play_list">
		<!-- 播放首页 -->
		   <div class='free_nav'>
			<img src="../../../assets/icon-close45.png" @click="ToBackPage">	
			<span>Gril Friend</span>
			<a class="active"><img src="../../../assets/icon-pull45.png"></a>
		</div>

		<!-- ........................................................ -->
		<div class="song_main">
			<div class="song_name">
				<div><hr/></div>
				<div><span>Avril Lavigne</span></div>
				<div><hr/></div>
			</div>
			<div class="MV_btn">
				<p>MV</p>
			</div>
			<img src="../../../assets/1@2x.png">
		</div>
		<!-- ....................................................................... -->
		<div class="comment_found"><p>You're so fine</p></div>
		<div class="comment_nav">
			<div :class="{'active':selectSingle}" @click="SelectSingle"></div>
			<div :class="{'active':selectAlbum}" @click="SelectAlbum"></div>
			<div :class="{'active':selectEntity}" @click="SelectEntity"></div>
		</div>
		<div class="down_nav">
			<img src="../../../assets/icon-love.png">
			<img src="../../../assets/icon-pinglun.png">
			<img src="../../../assets/icon-share.png">
			<img src="../../../assets/icon-download@2x32.png">
			<img src="../../../assets/icon-pen@2x32.png">
		</div>
		<div class="jindu">
			<div class="jindutiao"> <el-slider v-model="value5" ></el-slider></div>
			<div class="q_time">00:00</div>
			<div class="a_time">03:37</div>
		</div>
		<!-- ................................................. -->
		<div class="play_nav">
			<img src="../../../assets/icon-moshi@2x.png">
			<img src="../../../assets/icon-up@2x.png">
			<img src="../../../assets/incon-stop-60.png">
			<img src="../../../assets/icon-down@2x.png">
			<img src="../../../assets/icon-list.png">
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				selectSingle:false,
				selectAlbum:true,
				selectEntity:false
			}
		},
		// components:{
		// 	musicPlayer
		// },
		methods:{
			SelectSingle(){
				this.selectSingle = true;
				this.selectAlbum = false;
				this.selectEntity = false;
			},
			SelectAlbum(){
				this.selectSingle = false;
				this.selectAlbum = true;
				this.selectEntity = false;
			},
			SelectEntity(){
				this.selectSingle = false;
				this.selectAlbum = false;
				this.selectEntity = true;
			},
			ToBackPage(){
				window.history.back();
			}
		}
	}
</script>
<style lang="Less" scoped>
.play_list{
	width: 100%;
	overflow: hidden;
	background-color: #632598;
	height: 1332 / 100rem;
	position: relative;
}
.free_nav{
	width: 100%;
	height: 88 / 100rem;
	position: fixed;
	top: 0;
	left: 0;
	background-size: 100%;
}

.free_nav img{
	width: 40 / 100rem;
	height: 40 / 100rem;
	display: inline-block;
    margin-left: 20 / 100rem;
    margin-top:  26 / 100rem;

}
.free_nav span{
	display: inline-block;
	margin-left: 238 / 100rem;
	font-size: 36 / 100rem;
	color: #ffffff;
}
.active img{
  width: 65 / 100rem;
  height: 25 / 100rem;
  margin-left: 150/ 100rem;
}
/*..............................................*/
.song_main{
	margin-top: 88 / 100rem;
	/*overflow: hidden;*/
	position: relative;    
}
hr{
	width: 98 / 100rem;
}
.song_name{
	margin: 0 auto;
	position: absolute;
	left: 200 / 100rem;
	top: 26 / 100rem;
	color: #ffffff;
}
.song_name div{
	float: left;
}
.MV_btn{
	width: 60 / 100rem;
	height: 30 / 100rem;
	border-radius: 8 / 100rem;
	border:1/100rem solid #ffffff;
	font-size: 24/100rem;
	position: absolute;
	top: 90 / 100rem;
	left: 344 / 100rem;
	text-align: center;
	color: #ffffff;
}
.song_main img{
	width:500 / 100rem;
	height: 500 / 100rem; 
	position: absolute;
	left: 125 / 100rem;
	top: 160 / 100rem;
}
.comment_found{
/*	background-color: red;*/
	text-align: center;
	position: absolute;
    top:795 / 100rem;
    left: 295 / 100rem;
    color: #ffffff;
}
/*............................................*/
.comment_nav{
	        width: 120 / 100rem;
	        height: 20 / 100rem;
	        display: flex;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			text-align: center;
			margin-top:840 / 100rem;     
			margin-left: 330 / 100rem;
			margin-bottom: 75 / 100rem;

}

.comment_nav>div{
	        display: inline-block;
	        flex:1;
			padding-bottom:10 / 100rem;
			color: #333;
			display: block;
			width: 18 / 100rem;
			height: 18 / 100rem;
			border:1 / 100rem solid #ffffff;
			border-radius: 50%;		
}
.comment_nav>div:nth-child(2),.comment_nav>div:nth-child(3){
	margin-left: 25 / 100rem;
}
.comment_nav .active{
			color: #c995f5;
			background-color: #ffffff;
			}
/*...................................................*/
.jindutiao{
	width: 400 / 100rem;
	margin-left: 180 / 100rem;
}
.jindu{
	width: 100%;
	height: 30 / 100rem;
	/*background-color: red;*/
	position: relative;
}
.q_time{
	position: absolute;
    left: 40 / 100rem;
	top:25 / 100rem;
	color: #ffffff;
}
.a_time{
  position: absolute;
    right: 40 / 100rem;
	top:25 / 100rem;
	color: #ffffff;
}
/*............................................*/
.down_nav img{
	width: 34 / 100rem;
	height: 35 / 100rem;
}
.down_nav{
	margin-bottom: 75 / 100rem;
}
.down_nav img:nth-child(1){
	margin-left: 52 / 100rem;
}
.down_nav img:nth-child(2),.down_nav img:nth-child(3),.down_nav img:nth-child(4),.down_nav img:nth-child(5){
	margin-left: 115 / 100rem;
}
/*..............................................................*/
.play_nav{
	margin: 0 auto;
	margin-top: 94 / 100rem;
	position: relative; 
}
.play_nav img:nth-child(1){
   margin-left: 52 / 100rem;
}
.play_nav img:nth-child(1),.play_nav img:nth-child(5){
	width: 40 / 100rem;
	height: 30 / 100rem;
}
.play_nav img:nth-child(2),.play_nav img:nth-child(5){
	margin-left: 125 / 100rem;
}
.play_nav img:nth-child(5){
	margin-left: 120 / 100rem;
}
.play_nav img:nth-child(2),.play_nav img:nth-child(4){
	width: 45 / 100rem;
	height: 40 / 100rem;
}
.play_nav img:nth-child(3){
   margin-left: 86 / 100rem;
   margin-right: 86 / 100rem;
   width: 60 / 100rem;
   height: 60 / 100rem;
   position: relative;
   top:5 / 100rem;
}
</style>
